<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        .swipe {overflow: hidden;position: relative;}
        .swipe-wrap {overflow: hidden; position: relative;}
        .swipe-wrap .swipe-con { float:left; position: relative;}
        .swipe-wrap .swipe-con img{ width:100%; vertical-align: middle;  }
        #main{ padding: 2px; background-color: #e5e5e5;  }
        #main .flex-vertical .layout{ background:#e66961 url() right bottom no-repeat; margin: .3rem;  padding: .3rem; background-size: auto 50%; line-height: 2rem;  color: white; font-size: 1.8rem; }
        #main .flex-vertical .layout p{ font-size: 1rem; }
        #main .flex-vertical .layout.ic-hot{ background-image: url(../image/ic-hot.png); }
        #main .flex-vertical .layout.ic-article{ background-image: url(../image/ic-article.png); background-color: #6ab494; }
        #main .flex-vertical .layout.ic-tag{ background-image: url(../image/ic-tag.png); background-color: #9e9a8d; font-size: 1.6rem;}
        #main .flex-vertical .layout.ic-coffee{ background-image: url(../image/ic-coffee.png); background-color: #ebd275;  font-size: 1.6rem;}
        #main .flex-vertical .layout.ic-shop{ background-image: url(../image/ic-shop.png); background-color: #6ab494; }
        #main .flex-vertical .layout.ic-like{ background-image: url(../image/ic-like.png); background-color: #d8c09d; font-size: 1.6rem;}
        #main .flex-vertical .layout.ic-lable{ background-image: url(../image/ic-lable.png); font-size: 1.2rem;}
        #main .flex-vertical .layout.ic-more{ background-image: url(../image/ic-more.png); background-color: #ebd275; font-size: 1.2rem; background-size:
         50% auto; background-position: center right; }
        .flex-2{ -webkit-box-flex: 2;     -webkit-flex: 2;    flex: 2; }
        .hover{ opacity: .8; }
    </style>
</head>
<body>
    <div id="wrap" class="flex-wrap flex-vertical" >
        <div  class='swipe'>
            <div class='swipe-wrap'>
                <div class="swipe-con">
                    <img src="../image/api_100.png" alt="">
                </div>
                <div class="swipe-con">
                    <img src="../image/api_100.png" alt="">
                </div>
                <div class="swipe-con">
                    <img src="../image/api_100.png" alt="">
                </div>
                <div class="swipe-con">
                    <img src="../image/api_100.png" alt="">
                </div>
                <div class="swipe-con">
                    <img src="../image/api_100.png" alt="">
                </div>
            </div>
        </div>
        <div id="main" class="flex-wrap flex-con" >
             <div class="flex-con flex-wrap flex-vertical">
                 <div tapmode="hover" onclick="funOpenArticle1( this );" class="flex-wrap flex-con flex-2 layout-wrap">
                     <div class="flex-con layout ic-hot">
                        <h6>标题1</h6>
                        <p>简介</p>
                     </div>
                 </div>
                 <div tapmode="hover" onclick="funOpenArticle2( this );"  class="flex-wrap flex-con flex-2 layout-wrap">
                     <div class="flex-con layout ic-tag">
                        <h6>标题2</h6>
                        <p>简介</p>
                     </div>
                 </div>
                 <div tapmode="hover" onclick="funOpenArticle3( this );"  class="flex-wrap flex-con layout-wrap">
                     <div class="flex-con layout  ic-article">
                        <h6>标题3</h6>
                        <p>简介</p>
                     </div>
                 </div>
             </div>
             <div class="flex-wrap flex-con flex-vertical">
                 <div tapmode="hover" onclick="funOpenArticle( this );"  class="flex-wrap flex-con layout-wrap">
                     <div class="flex-con layout ic-coffee">
                        <h6>标题4</h6>
                        <p>简介</p>
                     </div>
                 </div>
                 <div tapmode="hover" onclick="funOpenArticle( this );"  class="flex-wrap flex-con flex-2 layout-wrap">
                     <div class="flex-con layout ic-shop">
                        <h6>标题5</h6>
                        <p>简介</p>
                     </div>
                 </div>
                 <div tapmode="hover" onclick="funOpenArticle( this );"  class="flex-wrap flex-con layout-wrap">
                     <div class="flex-con layout ic-like">
                        <h6>标题6</h6>
                        <p>简介</p>
                     </div>
                 </div>
                 <div class="flex-wrap flex-con">
                    <div tapmode="hover" onclick="funOpenArticle( this );"  class="flex-wrap flex-con layout-wrap">
                     <div class="flex-con layout ic-lable">
                        <h6>标题7</h6>
                        <p>简介</p>
                     </div>
                    </div>
                    <div tapmode="hover" onclick="funOpenArticle( this );"  class="flex-wrap flex-con layout-wrap">
                     <div class="flex-con layout ic-more">
                        <h6>标题8</h6>
                        <p>简介</p>
                     </div>
                    </div>
                 </div>
             </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/swipe.js"></script>
<script type="text/javascript">
    apiready = function(){

    };
    var mySwipe = new Swipe($api.dom('.swipe'), {
        speed: 400,
        auto: 3000,
        continuous: true,
        disableScroll: false,
        stopPropagation: false,
        transitionEnd: function(index, elem) {

        }
    });
    function funOpenArticle( tag ){
        api.openWin({
            name: 'win_webpage',
            url: './win_webpage.html',
            pageParam: {
                name: tag.querySelector('h6').innerHTML
           }
        });
    }
    function funOpenArticle1( tag ){
        api.openWin({
            name: 'win_webpage',
            url: './mytest_frm.html',
            pageParam: {
                name: tag.querySelector('h6').innerHTML
           }
        });
    }
    function funOpenArticle2( tag ){
        api.openWin({
            name: 'win_webpage',
            url: './youtest_frm.html',
            pageParam: {
                name: tag.querySelector('h6').innerHTML
           }
        });
    }
    function funOpenArticle3( tag ){
        api.openWin({
            name: 'win_webpage',
            url: './search.html',
            pageParam: {
                name: tag.querySelector('h6').innerHTML
           }
        });
    }
</script>
